import React from 'react';
import styles from './Timetable.module.css';

// 示例数据
const mockData = {
    timeSlots: [
        { id: 1, time: '8:00-9:40', period: '1-2节' },
        { id: 2, time: '10:00-11:40', period: '3-4节' },
        { id: 3, time: '14:00-15:40', period: '5-6节' },
        { id: 4, time: '16:00-17:40', period: '7-8节' },
        { id: 5, time: '19:00-20:40', period: '9-10节' },
    ],
    weekDays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    courses: [
        {
            id: 1,
            name: '高等数学',
            teacher: '张教授',
            location: 'A101',
            type: 'required',
            day: 1, // 星期一
            timeSlot: 1, // 1-2节
            duration: 2, // 持续2节课
        },
        {
            id: 2,
            name: '离散数学',
            teacher: '张教授',
            location: 'A101',
            type: 'required',
            day: 1, // 星期一
            timeSlot: 4, // 7-8节
            duration: 1, // 持续1节课
        },
        {
            id: 3,
            name: '大学英语',
            teacher: '李教授',
            location: 'B203',
            type: 'required',
            day: 2, // 星期二
            timeSlot: 1, // 1-2节
            duration: 3, // 持续3节课（1-2节、3-4节、5-6节）
        },
        {
            id: 4,
            name: '大学英语',
            teacher: '李教授',
            location: 'B203',
            type: 'required',
            day: 3,
            timeSlot: 3,
            duration: 1, // 持续1节课
        },
    ],
};

const Timetable = () => {
    // 获取当前时间，用于高亮显示当前课程
    const getCurrentTimeSlot = () => {
        const now = new Date();
        const hour = now.getHours();
        const minute = now.getMinutes();
        const time = hour + minute / 60;

        if (time >= 8 && time < 9.67) return 1;
        if (time >= 10 && time < 11.67) return 2;
        if (time >= 14 && time < 15.67) return 3;
        if (time >= 16 && time < 17.67) return 4;
        if (time >= 19 && time < 20.67) return 5;
        return null;
    };

    // 获取课程卡片样式
    const getCourseStyle = (type) => {
        switch (type) {
            case 'required':
                return styles.requiredCourse;
            case 'optional':
                return styles.optionalCourse;
            case 'lab':
                return styles.labCourse;
            default:
                return styles.defaultCourse;
        }
    };

    // 渲染课程卡片
    const renderCourseCard = (course, duration) => (
        <div
            className={`${styles.courseCard} ${getCourseStyle(course.type)}`}
            style={{
                // gridRow: `span ${duration}`,
                height: `${duration * 100}%`,
            }}
        >
            <h3 className={styles.courseName}>{course.name}</h3>
            <p className={styles.courseInfo}>{course.teacher}</p>
            <p className={styles.courseInfo}>{course.location}</p>
            {duration > 1 && (
                <p className={styles.courseDuration}>
                    {mockData.timeSlots[course.timeSlot - 1].period} -
                    {mockData.timeSlots[course.timeSlot + duration - 2].period}
                </p>
            )}
        </div>
    );

    // 获取单元格中的课程，并处理连续课程
    const getCellCourses = (day, timeSlot) => {
        const courses = mockData.courses.filter(course => course.day === day);

        // 找出当前时间段的课程
        const currentCourse = courses.find(course => course.timeSlot === timeSlot);

        // 如果当前时间段没有课程，返回空数组
        if (!currentCourse) return [];

        // 如果当前课程是某个连续课程的一部分（不是第一节课），返回空数组
        if (timeSlot > currentCourse.timeSlot) {
            const isPartOfLongerCourse = courses.some(
                course => course.timeSlot === currentCourse.timeSlot - 1 &&
                    course.id === currentCourse.id
            );
            if (isPartOfLongerCourse) return [];
        }

        // 返回当前课程，包含其持续时间信息
        return [{
            ...currentCourse,
            duration: currentCourse.duration || 1
        }];
    };

    return (
        <div className={styles.timetableContainer}>
            <h1 className={styles.title}>我的课表</h1>
            <div className={styles.timetable}>
                {/* 时间列 */}
                <div className={styles.timeColumn}>
                    <div className={styles.cornerCell}></div>
                    {mockData.timeSlots.map((slot) => (
                        <div key={slot.id} className={styles.timeCell}>
                            <div className={styles.period}>{slot.period}</div>
                            <div className={styles.time}>{slot.time}</div>
                        </div>
                    ))}
                </div>

                {/* 课程网格 */}
                {mockData.weekDays.map((day, dayIndex) => (
                    <div key={day} className={styles.dayColumn}>
                        <div className={styles.dayHeader}>{day}</div>
                        {mockData.timeSlots.map((slot) => {
                            const courses = getCellCourses(dayIndex + 1, slot.id);
                            const isCurrentTimeSlot = getCurrentTimeSlot() === slot.id;

                            return (
                                <div
                                    key={`${day}-${slot.id}`}
                                    className={`${styles.cell} ${isCurrentTimeSlot ? styles.currentTimeSlot : ''
                                        }`}
                                >
                                    {courses.map((course) => (
                                        <div key={course.id}>
                                            {renderCourseCard(course, course.duration)}
                                        </div>
                                    ))}
                                </div>
                            );
                        })}
                    </div>
                ))}
            </div>
        </div>
    );
};

export default Timetable; 